import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import InitForm from '@/components/InitForm';
import AutoTable from '@/components/AutoTable';
import { connect, useRequest } from 'umi';
import { area, classify, user } from '@/services/basic';
import CompanyName from '@/components/CompanyName';

function App({ user, route }) {

  let columns = [
    {
      title: '客户名称',
      dataIndex: 'company_name',
      key: 'company_name',
      render: (_, row) => (
        <CompanyName
          row={{ ...row, name: row?.company_name ?? row?.name, id: row?.company_id ?? row?.id }}
          reload={()=>{}}
        />
      ),
    },
    {
      title: '开票开始时间',
      dataIndex: 'start_date',
      key: 'start_date',
      valueType: 'date',
      hideInTable: true,
    },
    {
      title: '开票结束时间',
      dataIndex: 'end_date',
      key: 'end_date',
      valueType: 'date',
      hideInTable: true,
    },
    {
      title: '最小月收费',
      dataIndex: 'min_unit_price',
      key: 'min_unit_price',
      hideInTable: true,
    },
    {
      title: '最大月收费',
      dataIndex: 'max_unit_price',
      key: 'max_unit_price',
      hideInTable: true,
    },
    {
      title: '最小开票数量',
      dataIndex: 'min_invoice_num',
      key: 'min_invoice_num',
      hideInTable: true,
    },
    {
      title: '最大开票数量',
      dataIndex: 'max_invoice_num',
      key: 'max_invoice_num',
      hideInTable: true,
    },
    {
      title: '最小开票金额',
      dataIndex: 'min_amount',
      key: 'min_amount',
      hideInTable: true,
    },
    {
      title: '最大开票金额',
      dataIndex: 'max_amount',
      key: 'max_amount',
      hideInTable: true,
    },
    {
      title: '区域',
      dataIndex: 'area_id',
      key: 'area_id',
      valueType: 'select',
      hideInTable: true,
      options: {
        database: area,
        params: { is_all: 1 },
      },
    },

    {
      title: '月收费',
      dataIndex: 'unit_price',
      key: 'unit_price',
      search: false,
    },
    {
      title: '区域名称',
      dataIndex: 'area_name',
      key: 'area_name',
      search: false,
    },
    {
      title: '客户类型',
      dataIndex: 'classify_name',
      key: 'classify_name',
      search: false,
    },
    {
      title: '总开票数',
      dataIndex: 'total_invoice_num',
      key: 'total_invoice_num',
      search: false,
    },
    {
      title: '总开票金额',
      dataIndex: 'total_amount',
      key: 'total_amount',
      search: false,
    },
  ];

  return (
    <div className='pgcontainer'>
      {user.currentUser.is_admin ||
      ['13814606949', '18115813313'].includes(user?.currentUser?.phone) ? (
        <AutoTable
          pagetitle={route.name} //页面标题
          columns={columns}
          path="/wbn-api/invoice/statistic"
          rowKey="company_id"
        />
      ) : (
        <div
          style={{
            width: '100%',
            height: '100%',
            background: `url(${require('../assets/bgkj.jpg')}) no-repeat center`,
            backgroundSize: 'cover',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            flexDirection: 'column',
          }}
        >
          <h2 style={{ textShadow: '0 0 4px #fff', color: '#fff', fontSize: 32 }}>
            欢迎使用吾帮你
          </h2>
          <p style={{ textShadow: '0 0 4px #fff', color: '#f0f0f0', fontSize: 16 }}>
            —— 管理工厂、工人、员工、权限...
          </p>
        </div>
      )}
    </div>
  );
}

export default connect(({ business, loading, user }) => ({
  business,
  loading,
  user,
}))(App);
